<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
/* 导入部门类型 */
import type { DeptModelArray, ResultModel } from '@/api/model/model'
/* 导入工具类 */
// import request from '@/utils/request'
import { addApi, queryAllApi, queryByIdApi, updateApi, deleteByIdApi } from '@/api/dept'
import { ElMessage, ElMessageBox } from 'element-plus'

/* 表格数据
   ref<指定的类型>
   指定的类型：可以通过interface定义出来
*/
const tableData = ref<DeptModelArray>([])

/* 表单数据 */
const dialogFormVisible = ref(false)
const formTitle = ref('')
const formLabelWidth = '140px'

const form = ref({
  name: '',
})

/* 定义类型: 统一放到model.ts里面管理 通过impor方式导入类型 */
/* interface Dept{
  id?:'',
  name:'',
  updateTime?:''
} */

/* mock云端假数据：前端测试的时候，后端还没写好，就可以先用mock造一些假数据 访问云端mock获取数据 APIFox*/

/* 在页面启动时候通过钩子函数获取数据，渲染到前端页面 */
const deptSearch = async () => {
  /* 问题：url是硬编码方式，需要统一放到外面管理 */
  // const result =  await axios.get('https://m1.apifoxmock.com/m1/6616656-0-default/depts')
  // 优化使用request调用
  //  const result = await request.get<any,ResultModel>('/depts')
  // 继续对上面的代码进行优化
  const result = await queryAllApi()
  // 完成数据的赋值
  tableData.value = result.data
}
/* 钩子函数 */
onMounted(() => {
  /* 调用查询部门信息 */
  deptSearch()
})

/* 添加部门操作 */
const addDept = () => {
  /* 当按钮被点击时候，触发对话框显示出来 */
  dialogFormVisible.value = true
  formTitle.value = '添加部门'
  // 当添加部门数据时候，就清除上一次的记录
  form.value = { name: '' }
}
const saveDept = async () => {
  //如果有id执行修改操作，否则执行添加操作
  let result
  if ((form.value as any).id) {
    //修改
    result = await updateApi(form.value)
    if (result.code) {
      ElMessage.success('修改部门成功')
    } else {
      ElMessage.error(result.msg)
    }
  } else {
    //添加
    // 发起请求到后端，让数据保存到数据库
    result = await addApi(form.value)

    // 如果添加成功就提示用户，添加成功，如果失败，也要提示用户 // 非零则true，如果是0则代表false
    if (result.code) {
      ElMessage.success('添加部门成功')
    } else {
      ElMessage.error(result.msg)
    }
  }

  // 隐藏对话框
  dialogFormVisible.value = false
  // 再查询一次更新目前的数据
  deptSearch()
}

//修改部门
//回显
const edit = async (id: number) => {
  // 发起请求到后端，让数据保存到数据库
  const result = await queryByIdApi(id)
  formTitle.value = '修改部门'
  // 如果添加成功就提示用户，添加成功，如果失败，也要提示用户 // 非零则true，如果是0则代表false
  if (result.code) {
    // 回显数据
    form.value = result.data
    // 显示对话框
    dialogFormVisible.value = true
  }
}

//删除部门
const del = async (id: number) => {
  ElMessageBox.confirm('您确认删除该部门吗', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const result = await deleteByIdApi(id)
      if (result.code) {
        ElMessage.success('删除部门成功')
        // 再查询一次更新目前的数据
        deptSearch()
      } else {
        ElMessage.error(result.msg)
      }
    })
    .catch(() => {
      ElMessage.info('取消删除部门')
    })
}
</script>

<template>
  <div class="ai-bg">
    <svg class="ai-decor" viewBox="0 0 300 80">
      <defs>
        <linearGradient id="aiLine" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#667eea" />
          <stop offset="100%" stop-color="#f093fb" />
        </linearGradient>
      </defs>
      <polyline
        points="10,70 60,20 120,60 180,10 240,50 290,30"
        fill="none"
        stroke="url(#aiLine)"
        stroke-width="4"
        stroke-linecap="round"
        stroke-linejoin="round"
        opacity="0.7"
      />
      <circle cx="60" cy="20" r="5" fill="#a5b4fc" opacity="0.7" />
      <circle cx="180" cy="10" r="5" fill="#f093fb" opacity="0.7" />
      <circle cx="240" cy="50" r="5" fill="#667eea" opacity="0.7" />
    </svg>
    <div class="ai-particles">
      <span
        v-for="n in 12"
        :key="n"
        :style="{
          left: ((n * 7) % 100) + 'vw',
          top: ((n * 13) % 80) + 'vh',
          animationDelay: n * 0.7 + 's',
        }"
        class="ai-particle"
      ></span>
    </div>
    <div class="dept-container ai-glass">
      <div class="dept-header">
        <h1>部门管理</h1>
        <el-button type="primary" class="bt ai-btn" @click="addDept">
          <el-icon><Plus /></el-icon>新增部门
        </el-button>
      </div>
      <el-card class="table-card ai-glass">
        <el-table :data="tableData" border style="width: 100%" class="dept-table">
          <el-table-column type="index" label="序号" width="120" align="center" />
          <el-table-column prop="name" label="部门名称" width="240" align="center" />
          <el-table-column prop="updateTime" label="修改时间" width="300" align="center" />
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <div class="action-group">
                <el-button type="primary" class="action-btn ai-btn" @click="edit(scope.row.id)">
                  <el-icon><Edit /></el-icon>修改
                </el-button>
                <el-button
                  plain
                  type="danger"
                  class="action-btn ai-btn ai-btn-danger"
                  @click="del(scope.row.id)"
                >
                  <el-icon><Delete /></el-icon>删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-dialog
        v-model="dialogFormVisible"
        :title="formTitle"
        width="500"
        class="dept-dialog ai-glass"
      >
        <template #header>
          <div class="ai-dialog-header">
            <span class="ai-dialog-bar"></span>
            <span>{{ formTitle }}</span>
          </div>
        </template>
        <el-form :model="form">
          <el-form-item label="部门名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" class="ai-btn" @click="saveDept"> 提交 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped>
.ai-bg {
  min-height: 100vh;
  background: #f7f8fa;
  position: relative;
  overflow-x: hidden;
}
.ai-decor,
.ai-particles {
  display: none;
}

.dept-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 0 0 0;
  border-radius: 16px;
  box-shadow: none;
  background: transparent;
  border: none;
  box-sizing: border-box;
}
.ai-glass {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 16px 0 rgba(60, 72, 100, 0.06);
  border: 1px solid #f0f1f3;
}

.dept-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 0 32px;
}
.dept-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #23272e;
  margin: 0;
}

.bt,
.ai-btn {
  font-weight: 500;
  font-size: 15px;
  border-radius: 8px;
  padding: 7px 22px;
  background: #fff;
  color: #23272e;
  border: 1px solid #e5e7eb;
  box-shadow: none;
  transition:
    background 0.15s,
    color 0.15s,
    border 0.15s;
}
.bt:hover,
.ai-btn:hover {
  background: #f3f4f6;
  color: #23272e;
  border: 1px solid #d1d5db;
}
.ai-btn-danger {
  background: #fff !important;
  color: #e11d48 !important;
  border: 1px solid #fca5a5 !important;
}
.ai-btn-danger:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

.table-card {
  border-radius: 12px;
  box-shadow: 0 2px 16px 0 rgba(60, 72, 100, 0.06);
  border: 1px solid #f0f1f3;
  margin-bottom: 18px;
  background: #fff;
  transition: none;
  padding: 0 24px 24px 24px;
}

.dept-table {
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
  background: #fff;
}
.dept-table :deep(.el-table__header th) {
  background: #f7f8fa;
  color: #23272e;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid #f0f1f3;
}
.dept-table :deep(.el-table__row) {
  transition: background 0.2s;
  background: #fff;
}
.dept-table :deep(.el-table__row:hover) {
  background: #f7f8fa;
}
.dept-table :deep(.el-table__row--current) {
  background: #f3f4f6;
}
.dept-table :deep(.el-table__cell) {
  border-bottom: 1px solid #f0f1f3;
}

.action-btn {
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  margin: 0 2px;
  transition:
    background 0.15s,
    color 0.15s,
    border 0.15s;
  box-shadow: none;
  min-width: 60px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #23272e;
}
.action-btn:hover {
  background: #f3f4f6;
  color: #23272e;
  border: 1px solid #d1d5db;
}

.action-group {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.dept-dialog {
  border-radius: 14px !important;
  box-shadow: 0 4px 24px 0 rgba(60, 72, 100, 0.1);
  overflow: hidden;
  border: 1px solid #f0f1f3;
  background: #fff !important;
  padding-bottom: 8px;
}
.dept-dialog :deep(.el-dialog__header) {
  background: #f7f8fa;
  border-bottom: 1px solid #f0f1f3;
  border-radius: 14px 14px 0 0;
  padding: 18px 24px 10px 24px;
}
.dept-dialog :deep(.el-dialog__title) {
  font-size: 1.15rem;
  font-weight: 700;
  color: #23272e;
}
.dept-dialog :deep(.el-dialog__headerbtn) {
  top: 18px;
  right: 18px;
}
.dept-dialog :deep(.el-dialog__body) {
  background: #fff;
  border-radius: 0 0 14px 14px;
  padding: 24px 32px 8px 32px;
}
.dept-dialog :deep(.el-form-item__label) {
  color: #23272e;
  font-weight: 500;
}
.dept-dialog :deep(.el-input__wrapper) {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f7f8fa;
  box-shadow: none;
  transition: border 0.2s;
}
.dept-dialog :deep(.el-input__wrapper:hover),
.dept-dialog :deep(.el-input__wrapper.is-focus) {
  border: 1.5px solid #a5b4fc;
  background: #fff;
}
.dialog-footer {
  text-align: right;
  padding: 6px 0 0 0;
}
.dialog-footer .el-button {
  border-radius: 8px;
  background: #fff;
  color: #23272e;
  border: 1px solid #e5e7eb;
  font-weight: 500;
  transition:
    background 0.15s,
    color 0.15s,
    border 0.15s;
  min-width: 80px;
}
.dialog-footer .el-button:hover {
  background: #f3f4f6;
  color: #23272e;
  border: 1px solid #d1d5db;
}
.dialog-footer .el-button--primary {
  background: #2563eb;
  color: #fff;
  border: 1px solid #2563eb;
}
.dialog-footer .el-button--primary:hover,
.dialog-footer .el-button--primary:focus {
  background: #1d4fd7;
  color: #fff;
  border: 1px solid #1d4fd7;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 1200px) {
  .dept-container {
    max-width: 100%;
    padding: 16px 0 0 0;
  }
  .table-card {
    padding: 0 4px 12px 4px;
  }
  .dept-header {
    padding: 0 8px;
  }
}
</style>
